<template>
	<view class="category">
		<u-swipe-action>
			<u-swipe-action-item :options="options" @click="click(item, index)" v-for="(item, index) in categoryList" :key="index">
				<!-- 每个分类 盒子-->
				<view class="category-container" @click="editCategory(item, index)" >
					<!-- 左边图标，名字 -->
					<view class="left-icon-name-container">
						<!-- 里面包裹一层，背景色就是首页的分类的颜色，圆形，里面图标白色 -->
						<view class="left-icon-circular-container" :style="{backgroundColor: item.bgcColor}">
							<view :class="['left-icon', 'iconfont', item.icon]"></view>
						</view>
						<!-- 分类名字 -->
						<view class="left-name">{{item.name}}</view>
					</view>
					<!-- 右边预算 和向右箭头 -->
					<view class="right-budget-right-container">
						<!-- 预算 收入不显示 -->
						<view :style="{width: budgetLengthArr[index] + 'rpx'}" :class="['right-budget', {blackColor: item.budget}, {typefaceGreyColor: !item.budget}]" v-if="item.type == 'pay'">
							<!-- {{listenBudgeChangeLength(item.budget)}} -->
						<!-- <view @click="setBudget" :style="{width: listenBudgeChangeLength(item.budget) + 'rpx'}" :class="['right-budget', {blackColor: item.budget}, {typefaceGreyColor: !item.budget}]"> -->
							<!-- {{item.budget ? item.budget : '设置预算'}} -->
							<u--input border="none" type="number" v-model="item.budget" placeholder="设置预算" @change="change(index)"></u--input>
						</view>
						 <!-- 向右箭头 -->
						<view class="right-right iconfont icon-xiangyou1"></view>
					</view>
				</view>
			</u-swipe-action-item>
		</u-swipe-action>
	</view>
</template>
<script>
	import {checkStrType} from '@/util/regular/regular.js';
	export default {
		components: {
		},
		props: {
			// 包括id,名字，图标，背景色，预算，
			categoryList: {
				type: Array,
			}
		},
		name: 'category',
		watch: {
			// categoryList: {
			// 	handler: function(newValue, oldValue) {
			// 		// console.log(newValue,oldValue,"1231------------------------------");
			// 		this.initBudgetArr(newValue);
			// 	},  
			// 	immediate: false
			// }
		},
		data() {
			return {
				budgetLengthArr: [],						// 预算输入框长度数组，根据下标修改具体的长度值
				flag: false,							// 用于切换图标的上下
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: 'red',
						}
					}
				]
			};
		},
		methods: {
			/** 根据索引修改具体位置的长度
			 * @param {Object} index 索引
			 */
			change(index) {
				this.budgetLengthArr[index] = checkStrType(this.categoryList[index].budget);
			},
			/** 根据名称返回具体长度
			 * @param {Object} item 每个分类的名称，如果为空则设置为 ‘设置预算’
			 */
			listenBudgeChangeLength(item) {
				// this.budgetLength = checkStrType(item ? item : '设置预算');
			},
			
			test() {
				console.log("测试")
			},
			/**
			 * 设置预算，或者修改预算
			 */
			setBudget() {
				this.msg("修改预算")
				console.log("修改预算")
			},
			/**
			 * 编辑分类
			 */
			editCategory(item, index) {
				this.$emit("editCategoryDetail", item, index);
			},
			/** 删除
			 * @param {Object} item
			 * @param {Object} index
			 */
			click(item, index) {
				// 根据index判断出点击那个按钮
				// console.log(item, "item");
				this.$emit("deleteCategory", item);
			},
			/**
			 * 根据传来的值初始化每个input输入框的长度
			 */
			initBudgetArr(arr) {
				if (this.categoryList) {
					console.log("进来了", this.categoryList);
					this.budgetLengthArr = [];
					this.categoryList.forEach(item => {
						var length = checkStrType(item.budget ? item.budget : '设置预算');
						this.budgetLengthArr.push(length);
					});
				}
			}
		},
		mounted(){
			// 如果直接调佣会存在 categoryList为空的情况
			this.$nextTick(() => this.initBudgetArr())
		},
	};
</script>
<style scoped lang="scss">
	// 高度有遍历的时候，分类决定
	.category {
		width: 100%;
		box-sizing: border-box;
		// 每个分类
		.category-container {
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			// 左边图标 、 名字
			.left-icon-name-container {
				width: 40%;
				height: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				
				// 左边图标父盒子，装背景色
				.left-icon-circular-container {
					width: 23%;
					height: 65%;
					color: white;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50%;
					
					// 左边图标
					.left-icon {
						font-size: 40rpx;
						color: white;
					}
				}
				
				// 右边名字
				.left-name {
					margin-left: 10rpx;
					font-size: 25rpx;
				}
			}
			
			// 右边预算 、 向右箭头
			.right-budget-right-container {
				// width: 30%;
				height: 80%;
				text-align: center;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				
				// 预算
				.right-budget {
					min-width: 30rpx;
					padding: 0rpx 20rpx;
					height: 65%;
					font-size: 20rpx;
					font-weight: bold;
					background-color: #e6e6e6;
					border-radius: 30rpx;
					font-size: 25rpx;
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				
				// 向右箭头
				.right-right {
					margin-left: 10rpx;
					color: $typefaceGreyColor;
				}
			}
		}
	}
	
	.blackColor {
		color: black;
	}
	
	.typefaceGreyColor {
		color: #8e8e8e;
	}
</style>
